<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="cu-item cu-item-style" :class="index==TabCur?'active cur':''" @tap="clickChange" :data-id="index" v-for=" (item,index) in tab" :key="index">{{item}}</view>
		</scroll-view>
		<!--文章类卡片-->
		<view class="cu-card case" :class="isCard?'no-card':''" v-for="(item,index) in articleList" :key="index" @click="clickArticle(item.article_id)">
			<view class="cu-item shadow">
				<view class="image" style="height: 370rpx;">
					<!-- v-if="item.photoList" :src="item.photoList[0]" -->
					<image mode="aspectFit" :src="item.cover_image"></image>
					<view class="cu-tag bg-blue">{{item.category_name}}</view>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{item.article_title}}</text></view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" style="height: 40px;">
						<view class="content flex-sub">
							<view class="text-gray text-sm flex justify-between">
								<view class="text-gray text-sm" style="font-size: 26rpx;">
									<text style="display: inline;">
										<text style="margin-left: -60px;margin-right: 130px;">
											<text class="cuIcon-peoplefill margin-lr-xs"></text>{{item.nickname}}
										</text>
										<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> -->
										<text class="cuIcon-share margin-lr-xs"></text>{{item.share_count || 0}}
										<text class="cuIcon-favorfill margin-lr-xs"></text>{{item.collect_length || 0}}
										<text class="cuIcon-messagefill margin-lr-xs"></text>{{item.comment_length || 0}}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text>{{item.like_length || 0}}
									</text>
									<!-- <text class="cuIcon-timefill margin-lr-xs"></text>{{item.add_time | formatTime}} -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur:0,
				tab: ["收藏","点赞","文章"],
				open_id:'',
				articleList:[]
			}
		},
		onLoad:function(options){
			console.log(options.id);
			this.TabCur = options.id;
			if (uni.getStorageSync('openid')) {
				this.open_id = uni.getStorageSync('openid');
			}
			if (uni.getStorageSync('MyusrInfo')) {
				if(options.id == 0){
					this.getCollectArticle(this.open_id)
				}else if(options.id == 2){
					this.getPublishArticle(this.open_id)
				}
			}
		},
		methods:{
			clickChange:function(e){
				let index = e.currentTarget.dataset.id;
				this.TabCur = index
				if (uni.getStorageSync('MyusrInfo')) {
					if(index == 0){
						this.getCollectArticle(this.open_id)
					}else if(index == 1){
						this.getLikeArticle(this.open_id)
					}else if(index == 2){
						this.getPublishArticle(this.open_id)
					}
				}
			},
			clickArticle: function(articleId) {
				uni.navigateTo({
					url: '../../pages/detail/detail?article_id=' + articleId,
				})
			},
			getLikeArticle:function(openId){
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/Good/likeArticle',
					method: 'GET',
					data: {
						open_id: openId
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							_this.articleList = res.data.data.likeArticleList;
				
						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}
				
						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				
				})
			},
			getCollectArticle:function(openId){
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/Collect/collectArticle',
					method: 'GET',
					data: {
						open_id: openId
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log(res.data.data)
							_this.articleList = res.data.data.collectArticleList;
				
						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}
				
						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				
				})
			},
			getPublishArticle:function(openId){
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/Article/list',
					method: 'GET',
					data: {
						open_id: openId
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log(res.data.data)
							_this.articleList = res.data.data.articleList;
				
						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}
				
						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				
				})
			}
		},
		filters: {
			formatTime: function(time) { //
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let hour = date.getHours().toString().padStart(2, '0');
				let minute = date.getMinutes().toString().padStart(2, '0');
				let second = date.getSeconds().toString().padStart(2, '0');
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		}
	}
</script>

<style>
	.cu-item-style {
		width: 30%;
		font-size: 14px;
		text-align: center;
	}

	.active {
		color: #d69c63;
	}
</style>
